<!-- 新增和编辑弹窗 -->
<template>
  <a-modal
    :width='1100'
    :visible='visible'
    :confirm-loading='loading'
    title="告警联系人"
    :body-style="{ paddingBottom: '8px' }"
    @update:visible='updateVisible'
    @ok='save'
  >
    <a-form
      layout='horizontal'
      ref='form'
      :model='form'
      :label-col='{ md: { span: 4 }, sm: { span: 24 } }'
      :wrapper-col='{ md: { span: 20 }, sm: { span: 24 } }'
    >
      <!--基本信息 -->
      <div class="card-title card-title-background">告警</div>
      <a-form-item label='告警名称:' name='objName'>
        <a-input v-model:value='form.objName' disabled placeholder='请输入告警名称' allow-clear autocomplete='off'/>
      </a-form-item>

      <a-form-item label='告警描述:' name='objDesc'>
        <a-textarea v-model:value="form.objDesc" disabled  allow-clear autocomplete='off'/>
      </a-form-item>
    </a-form>
    <div>
      <MonitorsConfObjectsContactSub v-for="(item, index) in objectsContacts"
                                     :key="index" :index="index" :contact="item" @deleteIndex="removeContact"
                                     :contactList="contactList"
      />
    </div>

    <a-space>
      <a-button type="primary" @click="addContact">
        <template #icon>
          <plus-outlined/>
        </template>
        <span>新增告警联系人</span>
      </a-button>
    </a-space>
  </a-modal>
</template>

<script>
import {message} from 'ant-design-vue';
import MonitorsConfObjectsContactSub from "./objects-contact-sub.vue";
import {MonitorObjectsNoticeApi} from "@/api/monitors/MonitorObjectsNoticeApi";
import {MonitorContactsApi} from "@/api/monitors/MonitorContactsApi";


export default {
  name: 'MonitorsConfObjectsContactEdit',
  components: {
    MonitorsConfObjectsContactSub
  },
  emits: ['done', 'update:visible'],
  props: {
    // 弹窗是否打开
    visible: Boolean,
    // 修改回显的数据
    data: Object
  },
  created() {
    let that = this;
    this.form = {};
    this.form.objName = this.data.objName;
    this.form.objDesc = this.data.objDesc;
    MonitorContactsApi.list({}).then(result => {
      that.contactList = (result ? result.data : null) || [];
    }).catch((err) => {
      console.log(err)
    });

    MonitorObjectsNoticeApi.objectsContactsList(this.data.objId).then(result => {
      that.objectsContacts = result || [];
    }).catch((err) => {
      console.log(err)
    });

  },
  data() {
    return {
      // 表单数据
      form: Object.assign({}, this.data),
      objectsContacts : [],
      // 表单验证规则
      // 提交状态
      loading: false,
      // 是否是修改
      isUpdate: false,
      contactList : [],
    };
  },
  methods: {
    /**
     * 保存和编辑
     *
     * @author cancan
     * @date 2023/05/27 21:37
     */
    async save() {
      console.log(this.form);
      // 修改加载框为正在加载
      this.loading = true;

      let result = null;

      // 执行编辑或修改
      let updateObjectsFrom = {
        objId: this.data.objId,
        notices : this.objectsContacts,
      };
      result = MonitorObjectsNoticeApi.editNotices(updateObjectsFrom);
      result
        .then(result => {
          // 移除加载框
          this.loading = false;

          // 提示添加成功
          message.success(result.message);
          this.form = {};

          // 关闭弹框，通过控制visible的值，传递给父组件
          this.updateVisible(false);

          // 触发父组件done事件
          this.$emit('done');
        })
        .catch(() => {
          this.loading = false;
        });
    },

    /**
     * 更新编辑界面的弹框是否显示
     *
     * @param value true-显示，false-隐藏
     * @author cancan
     * @date 2023/05/27 21:37
     */
    updateVisible(value) {
      this.$emit('update:visible', value);
    },
    addContact() {
      this.objectsContacts.push({});
    },
    removeContact(index) {
      this.objectsContacts.splice(index, 1)
    }
  }
};
</script>

<style lang="less" scoped>
.card-title {
  border-left: 5px solid;
  border-color: var(--primary-color);
  padding-left: 10px;
}

.card-title-background {
  background-color: #f5f5f5;
  height: 2em;
  line-height: 2em;
  margin-bottom: 2em;
}
</style>
